<script setup lang="ts">
import BackTop from '@/components/seek/BackTop/backtop.vue'
import { onPageScroll } from '@dcloudio/uni-app'
import type { BannerItem, CategoryItem } from '@/types/index/home'
import NavBar from './components/NavBar.vue'
import Swiper from './components/Swiper.vue'
import PutTop from './components/PutTop.vue'
import IndexBottom from './components/IndexBottom.vue'
import CategoryPanel from './components/CategoryPanel.vue'
import Recommendation from './components/Recommendation.vue'
import { getCategoryIconListAPI, getHomeBannerAPI } from '@/services/index/home'
import { ref } from 'vue'
const BannerList = ref<BannerItem[]>([
  {
    id: '1',
    imgUrl: 'https://img.51miz.com/Element/00/98/99/44/a5fba953_E989944_c8f215d6.jpg',
    hrefUrl: '',
    type: '',
  },
  {
    id: '2',
    imgUrl:
      'https://th.bing.com/th/id/R.f061b4e1e27e85f8a2f1b446f5632da0?rik=K0NtVoVwv%2fyNZQ&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50051%2f5330.jpg_wh1200.jpg&ehk=9O9IRo5ZS6NMOdTfofPM7C3kRMcOFJb0KQ9zI44iVsM%3d&risl=&pid=ImgRaw&r=0',
    hrefUrl: '',
    type: '',
  },
  {
    id: '3',
    imgUrl: 'https://img95.699pic.com/photo/40027/8625.jpg_wh860.jpg',
    hrefUrl: '',
    type: '',
  },
])
const getHomeBannerData = async () => {
  const res = await getHomeBannerAPI()
  BannerList.value = res.result
}

const showBackToTop = ref(false)
// 滚动事件
onPageScroll((event) => {
  showBackToTop.value = event.scrollTop > 100
})

const categoryList = ref<CategoryItem[]>([
  {
    id: '1',
    icon: '/static/categoryIcons/fj.png',
    name: '活动',
    url: '/pages/index/activity/index',
    pageStatus: 'navigate',
  },
  {
    id: '3',
    icon: '/static/categoryIcons/fq.png',
    name: '红娘',
    url: '/pages/matchmaker/matchmaker',
    pageStatus: 'switchTab',
  },
  {
    id: '2',
    icon: '/static/categoryIcons/mb.png',
    name: '寻觅',
    url: 'seek/index',
    pageStatus: 'navigate',
  },
  {
    id: '5',
    icon: '/static/categoryIcons/fk.png',
    name: '公告',
    url: '/pages/announcement/announcement',
    pageStatus: 'navigate',
  },
  {
    id: '4',
    icon: '/static/categoryIcons/VIP.png',
    name: 'VIP',
    url: '/pages/vip/vip',
    pageStatus: 'navigate',
  },
  {
    id: '6',
    icon: '/static/categoryIcons/dw.png',
    name: '邂逅',
    url: '/pages/index/meet/index',
    pageStatus: 'navigate',
  },
])
const getCategoryIconList = async () => {
  const res = await getCategoryIconListAPI()
  categoryList.value = res.result
}
</script>

<template>
  <NavBar />
  <scroll-view scroll-y="true" class="scroll-view">
    <Swiper :list="BannerList" />
    <CategoryPanel :list="categoryList" />
    <PutTop />
    <Recommendation />
    <IndexBottom />
  </scroll-view>
  <!-- 返回顶部 -->
  <BackTop :show="showBackToTop" />
</template>

<style lang="scss">
//
</style>
